<template>
  <div class="chart-item">
    <div class="chart" :id="chartId"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "BarChart",
  props: {
    selectId: {
      type: [String, Number],
      default: null
    },
    list: {
      type: Array,
      default: () => []
    },
    unit:{
      type: String,
      default: null
    }
  },
  data() {
    return {
      chart: null,
      chartId: `chart-${Math.random().toString(36).substr(2, 9)}`
    };
  },
  watch: {
    selectId: {
      handler: 'updateChart',
      immediate: true
    },
    list: {
      handler: 'updateChart',
      deep: true
    },
    unit:{
      type: String,
      default: null
    }
  },
  methods: {
    async initChart() {
      if (!this.chart) {
        const chartDom = document.getElementById(this.chartId);
        this.chart = echarts.init(chartDom);
        this.chart.showLoading({
          text: '加载中',
          textColor: '#fff',
          maskColor: 'rgba(0,0,0,0)'
        });
      }
      let option = this.chartOption();
      this.chart.setOption(option);
      this.chart.hideLoading();
    },
    chartOption() {
      let xData = [];
      let yData = [];
      if(this.selectId){
        let data = this.list.filter(item => this.selectId === item.selectId)
        xData=data[0].xData
        yData=data[0].yData
      }else{
        xData = this.list[0].xData;
        yData = this.list[0].yData;
      }

      return {
        grid: {
          right: 30,
          bottom: 60,
          top: 34,
          left: 20,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: xData,
          axisLabel: {
            color: '#A3A3C9',
            fontSize: 10,
            rotate: 50,
            formatter: this.axisLabelFormatter
          },
          axisLine: {
            lineStyle: {
              color: '#0B3771'
            }
          },
          axisTick: {
            show: false
          },
          offset: 10
        },
        yAxis: {
          type: 'value',
          name: '单位：'+this.unit,
          nameTextStyle: {
            color: '#A3A3C9',
            fontSize: 12
          },
          axisLabel: {
            color: '#A3A3C9'
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(199,199,200,0.1)',
              type: 'dashed'
            }
          }
        },
        series: [
          {
            data: yData,
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#0EEDFB'
                  },
                  {
                    offset: 1,
                    color: '#10294e'
                  }
                ]),
                opacity: 0.8
              }
            },
            label: {
              show: true,
              position: 'top',
              color: '#fff',
              formatter: (params) => params.value
            }
          }
        ]
      };
    },
    axisLabelFormatter(value) {
      var ret = '';
      var maxLength = 3;
      var valLength = value.length;
      var rowN = Math.ceil(valLength / maxLength);
      if (rowN > 1) {
        for (var i = 0; i < rowN; i++) {
          var temp = '';
          var start = i * maxLength;
          var end = start + maxLength;
          temp = value.substring(start, end) + '\n';
          ret += temp;
        }
        return ret;
      } else {
        return value;
      }
    },
    updateChart() {
      if (this.chart) {
        this.initChart();
      }
    }
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  }
}
</script>

<style scoped lang="scss">
.chart-item {
  width: 100%;
  height: 100%;
}
.chart {
  width: 100%;
  height: 300px; /* 确保高度不为 0 */
}
</style>
